<script setup lang="ts">
// import { AGENT_LIST } from '../utils/constant'
import SvgIcon from '@/components/SvgIcon/index.vue'
import type { AgentItem } from '../types'
const props = defineProps<{
  userName: string
  greeting: string
  currentIcon: string
  fullScreen: boolean
  agentList: AgentItem[]
}>()

const emit = defineEmits(['agentClick'])

const handleAgentClick = (item: { name: string; icon: string; apiKey: string }) => {
  emit('agentClick', item)
}
</script>

<template>
  <div
    class="deepseek-chat-default text-center pt-14 px-[1.125rem] mx-auto"
    :class="{ '!w-[784px] !px-0': props.fullScreen }"
  >
    <div class="mx-auto mt-[9.5rem] w-16 h-16 border rounded-full border-[#38F2F4] mb-8">
      <img src="@/assets/images/ai-robot-mirror.png" alt="deepseek-logo" class="w-full h-full" />
    </div>
    <!-- <div class="text-[#899DBA] text-[1.25rem] h-8 leading-8">{{ `Hi，${props.userName}` }}</div> -->
    <div class="text-[#F5F9FF] text-[1.25rem] font-bold h-8 leading-8">
      欢迎回来！有什么可以帮您？
    </div>
    <div class="text-[#899DBA] text-[.875rem] leading-6 mt-4">
      {{ props.greeting }}
    </div>
    <div class="mt-10 grid grid-cols-3 gap-4" :class="{ '!grid-cols-6': props.fullScreen }">
      <div
        v-for="item in props.agentList"
        :key="item.name"
        @click="handleAgentClick(item)"
        :class="currentIcon === item.icon ? 'agent-item-active' : 'agent-item'"
        class="cursor-pointer px-2 flex items-center text-[#CAD6E8] h-8 leading-8 w-[124px]"
      >
        <SvgIcon :name="item.icon" class="text-[.8125rem] mr-2 flex items-center" />
        <div class="text-[.875rem]">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.agent-item {
  background: rgba(56, 242, 244, 0);
  border-radius: 0.25rem;
  border: 1px solid rgba(202, 214, 232, 0.2);
  font-family: 'PingFang SC';

  &:hover {
    color: #38F2F4;
    background: rgba(56, 242, 244, 0.05);
    box-shadow: inset 0px 0px 8px 0px rgba(1, 252, 255, 0.5);
    border-radius: 0.25rem;
  }
}

.agent-item-active {
  color: #38F2F4;
  background: rgba(56, 242, 244, 0.05);
  box-shadow: inset 0px 0px 8px 0px rgba(1, 252, 255, 0.5);
  border-radius: 0.25rem;
}
</style>
